<template>
  <div>
    <div class="header">
      <div class="header-title">
        <div class="header-btn">
          <i class="icon-back"></i>
          <el-button type="text" class="return_btn" @click="$router.push('/course')">返回</el-button>
        </div>
        <div class="title-name">
          新增课程
        </div>
          <el-steps
            :active="activeStep"
            simple
            class="step_"
            align-center>
            <el-step
              :title="item.title"
              :icon="item.icon"
              v-for="(item,index) in steps"
              :key="index"
              @click.native="activeStep = index">
              </el-step>
          </el-steps>
      </div>
      <el-button type="primary">保存</el-button>
    </div>
    <el-card>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px">
        <div v-show="activeStep === 0">
          <span>基本信息</span>
          <el-form-item label="名称" prop="courseName">
            <el-input v-model="form.courseName" maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="brief">
            <el-input v-model="form.brief" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="讲师姓名" prop="teacherDTO.teacherName">
            <el-input v-model="form.teacherDTO.teacherName" maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="teacherDTO.position">
            <el-input v-model="form.teacherDTO.position" maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="讲师简介" prop="teacherDTO.description">
            <el-input v-model="form.teacherDTO.description" maxlength="100" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="课程概述">
            <el-col :span="11">
              <el-input v-model="form.previewFirstField" maxlength="20" show-word-limit></el-input>
            </el-col>
            <el-col :span="11" style="margin-left:2rem;">
              <el-input v-model="form.previewSecondField" maxlength="20" show-word-limit></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="课程排序">
            <el-input-number
              v-model="form.sortNum"
              controls-position="right"></el-input-number>
          </el-form-item>
        </div>
        <div v-show="activeStep === 1">
          <span>课程封面</span>
          <el-form-item label="课程封面">
            <course-upload
              v-model="form.courseListImg"
              :limit="3"></course-upload>
          </el-form-item>
          <el-form-item label="介绍封面">
            <course-upload
              v-model="form.courseImgUrl"></course-upload>
          </el-form-item>
        </div>
        <div v-show="activeStep === 2">
          <span>销售信息</span>
          <el-form-item label="售卖价格">
            <el-input v-model="form.discounts">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品原价">
            <el-input v-model="form.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input v-model="form.sales">
              <template slot="append">单</template>
            </el-input>
          </el-form-item>
          <el-form-item label="活动标签">
            <el-input v-model="form.discountsTag" maxlength="4" show-word-limit></el-input>
          </el-form-item>
        </div>
        <div v-show="activeStep === 3">
          <div>秒杀活动</div>
          <el-form-item label="限时秒杀">
            <el-switch
              v-model="form.activityCourse"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <div class="switch_cls" v-if="form.activityCourse">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="form.activityCourseDTO.beginTime"
                type="date"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="form.activityCourseDTO.endTime"
                type="date"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="秒杀价">
              <el-input v-model="form.activityCourseDTO.amount">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="秒杀库存">
              <el-input v-model="form.activityCourseDTO.stock">
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div v-show="activeStep === 4">
          <span>课程详情</span>
          <el-form-item label="课程详情">
            <editor style="margin-top:16px;" v-model="form.courseDescriptionMarkDown"></editor>
            <!-- <el-input type="textarea" v-model="form.courseDescriptionMarkDown"></el-input> -->
          </el-form-item>
          <el-form-item label="是否发布">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </div>
        <el-button v-if="activeStep>=0 && activeStep<4" @click="activeStep++">下一步</el-button>
        <el-button v-if="activeStep>3" @click="handleSave" type="primary">完成</el-button>
      </el-form>

    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import courseUpload from '@/views/course/components/CourseUpload.vue'
import { getCourseById, saveOrUpdateCourse } from '@/services/courses'
import editor from '@/components/editor.vue'
import moment from 'moment'
export default Vue.extend({
  name: 'CreateOrUpdate',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: [String, Number]
    }
  },
  components: {
    courseUpload,
    editor
  },
  data () {
    return {
      activeStep: 0,
      steps: [
        { title: '基本信息', icon: 'el-icon-picture' },
        { title: '课程封面', icon: 'el-icon-picture' },
        { title: '销售信息', icon: 'el-icon-picture' },
        { title: '秒杀活动', icon: 'el-icon-picture' },
        { title: '课程详情', icon: 'el-icon-picture' }
      ],
      form: {
        // id: 0, // 添加不需要，修改需要
        courseName: '',
        brief: '',
        teacherDTO: {
          // id: 0,
          // courseId: 0,
          teacherName: '',
          teacherHeadPicUrl: '',
          position: '',
          description: ''
        },
        courseDescriptionMarkDown: '',
        price: 0,
        discounts: 0,
        priceTag: '',
        discountsTag: '',
        isNew: true,
        isNewDes: '',
        courseListImg: '',
        courseImgUrl: '',
        sortNum: 0,
        previewFirstField: '',
        previewSecondField: '',
        status: 1, // 0 未上架， 1上架了
        sales: 0,
        activityCourse: true,
        activityCourseDTO: {
          // id: 0,
          // courseId: 0,
          beginTime: '',
          endTime: '',
          amount: 0,
          stock: 0
        },
        autoOnlineTime: ''
      },
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        brief: [
          { required: true, message: '请输入课程简介', trigger: 'blur' }
        ],
        'teacherDTO.teacherName': [
          { required: true, message: '请输入讲师姓名', trigger: 'blur' }
        ],
        'teacherDTO.position': [
          { required: true, message: '请输入讲师职位', trigger: 'blur' }
        ],
        'teacherDTO.description': [
          { required: true, message: '请输入讲师简介', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async handleSave () {
      // if (this.form.activityCourse) {
      //   this.form.activityCourseDTO.beginTime = moment(this.form.activityCourseDTO.beginTime).valueOf() + ''
      //   this.form.activityCourseDTO.endTime = moment(this.form.activityCourseDTO.endTime).valueOf() + ''
      // }
      // console.log(this.form)
      const { data } = await saveOrUpdateCourse(this.form)
      console.dir(data)
      if (data.code === '000000') {
        this.$router.push('/course')
      }
      // 上架的课程查询地址 http://edufront.lagou.com/#/
    },
    async handlerEidtById () {
      if (this.courseId) {
        const { data } = await getCourseById(this.courseId)
        const { activityCourseDTO, activityCourse } = data.data
        if (activityCourse) {
          activityCourseDTO.beginTime = moment(activityCourseDTO.beginTime).format('YYYY-MM-DD') // YYYY-MM-DD HH:mm:ss
          activityCourseDTO.endTime = moment(activityCourseDTO.endTime).format('YYYY-MM-DD')
        }
        this.form = data.data
      }
    }
  },
  created () {
    this.handlerEidtById()
  }
})
</script>

<style lang="scss" scoped>
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-title{
    display: flex;
    // line-height: 38px;
    align-items: center;
    .header-btn{
      position: relative;
      display: flex;
      margin-right: 40px;
      .icon-back{
        font-size: 18px;
        margin-right: 6px;
        align-self: center;
      }
      .icon-back:before{
        content: '←';
      }
      .return_btn{
        font-size: 14px;
        font-weight: 500;
      }
      .return_btn:after{
        content: "";
        position: absolute;
        width: 1px;
        height: 16px;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #dcdfe6;
      }
    }
    .title-name{
      width: 100px;
    }
  }
}
.step_{
  margin-left: 40px;
  padding:13px 0;
  background: #e9eef3;
  cursor: pointer;
}
.el-input-number{
  width: 500px;
}
.switch_cls{
  margin-top: 1rem;
  margin-left: 1rem;
}
</style>
